<template>
  <!-- 餐厅详情 -->
  <view class="restaurantDetails">
    <view class="bgColor"></view>

    <view class="wrapper">
      <view class="blueTitle">
        <view class="wrapper-bar" style="height: auto">
          <view class="wrapper-bartitle">
            {{ detail.restaurantName || "" }}

            <text
              class="textState"
              :class="
                auditStatus == 1
                  ? 'stat1'
                  : auditStatus == 3
                  ? 'stat2'
                  : 'stat3'
              "
            >
              {{
                auditStatus == 1
                  ? "审核中"
                  : auditStatus == 3
                  ? "已拒绝"
                  : "已通过"
              }}
            </text>
          </view>
        </view>
      </view>

      <!-- 营业地址 -->
      <view class="wrapper-item wrapper-zero">
        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">营业地址：</view>
            <view class="value valueName"> 
              {{ detail.detailAddress || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">门头照片：</view>
            <view
              class="value valueName"
              @click="pvwImage([imgPrefix + detail.doorstepPhoto])"
              style="color: #00c9ae"
            >
              查看
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">所属街道：</view>
            <view class="value valueName">
              {{ detail.regionName || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">监管单位：</view>
            <view class="value valueName">{{ detail.unitName || "" }}</view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">餐厅负责人：</view>
            <view class="value valueName"> {{ detail.chargeName || "" }} </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">负责人联系电话：</view>
            <view class="value valueName"> {{ detail.chargePhone || "" }}</view>
          </view>
        </view>
      </view>

      <!-- 资质信息 -->
      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle book-bartitle">
            <view>
              <image
                :src="baseImgUrl + 'book_icon.png'"
                mode="aspectFill"
                class="bar-image"
              ></image
            ></view>
            <view>资质信息</view>
          </view>
        </view>

        <view class="wrapper-body">
          <view class="wrapper-facility">
            <view class="facility-item">
              <view class="textAlign label">信用代码：</view>
              <view class="value valueName">
                {{ detail.creditCode || "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">企业名称：</view>
              <view class="value valueName">
                {{ detail.businessName || "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">负责人：</view>
              <view class="value valueName">
                {{ detail.chargeName || "" }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle book-bartitle">
            <view>
              <image
                :src="baseImgUrl + 'book_icon.png'"
                mode="aspectFill"
                class="bar-image"
              ></image
            ></view>
            <view>营业信息</view>
          </view>
        </view>

        <view class="wrapper-body">
          <view class="wrapper-facility">
            <view class="facility-item">
              <view class="textAlign label">灶头数量：</view>
              <view class="value valueName">
                {{ detail.stoveNum || "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">餐厅规模：</view>
              <view class="value valueName">
                {{
                  detail.scale == 1
                    ? "小型"
                    : detail.scale == 2
                    ? "中型"
                    : "大型" || ""
                }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">清洗周期：</view>
              <view class="value valueName">
                {{ detail.cleanCycle || "0" }}天
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">企业类别：</view>
              <view class="value valueName"> {{ typeDesc || "" }} </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">营业面积：</view>
              <view class="value valueName">
                {{ detail.businessArea || "0" }}m²
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">就餐座位数：</view>
              <view class="value valueName">
                {{ detail.seatingCapacity || "" }}位
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">就业人数：</view>
              <view class="value valueName">
                {{ detail.employment || "0" }}人
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 审核信息 </view>
        </view>
        <view class="wrapper-body">
          <view class="item-info">
            <view class="lt"> 提交时间： </view>
            <view class="rt">{{ detail.createTime }}</view>
          </view>
          <view class="item-info">
            <view class="lt"> 审核状态： </view>
            <view
              class="rt"
              :class="
                auditStatus == 1
                  ? 'stat1'
                  : auditStatus == 3
                  ? 'stat2'
                  : 'stat3'
              "
              >{{
                auditStatus == 1
                  ? "待审核"
                  : auditStatus == 3
                  ? "已拒绝"
                  : "已通过"
              }}</view
            >
          </view>

          <block v-if="auditStatus == 3">
            <view class="item-info">
              <view class="lt"> 拒绝时间： </view>
              <view class="rt">{{ detail.auditTime || "" }}</view>
            </view>
            <view class="item-info">
              <view class="lt"> 拒绝理由： </view>
              <view class="rt">{{ detail.auditMemo || "" }}</view>
            </view>
          </block>

          <view class="item-info" v-if="auditStatus == 2">
            <view class="lt"> 通过时间： </view>
            <view class="rt">{{ detail.auditTime || "" }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { restaurantDetail } from "@/api/myself.js";
import { findEnableDictItemsbyCode } from "@/api/api.js";
import { handleClickRouter, hiddenInfo, pvwImage } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      options: {},
      detail: {},
      typeDesc: "",
      imgPrefix: uni.getStorageSync("imgPrefix"),
      auditStatus: "", //状态   1.审核中 2.审核通过 3.审核失败
      pageConfig: {
        pageNo: 1,
        pageSize: 100,
        total: 0,
      },
    };
  },
  onLoad(options) {
    this.options = options;
    this.getList(options.id);
  },
  methods: {
    handleClickRouter,
    hiddenInfo,
    pvwImage,
    getList(id) {
      restaurantDetail({ restaurantId: id })
        .then((res) => {
          if (res.code == 200) {
            this.detail = res.result;
            this.auditStatus = res.result.auditStatus;
          }

          return res.result.type;
        })
        .then((type) => {
          findEnableDictItemsbyCode("restaurant_type").then((res) => {
            res.result.filter((v) => {
              if (v.value == type) {
                this.typeDesc = v.text;
              }
            });
          });
        });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.restaurantDetails {
  flex: 1;
  background-color: #f3f3f3;
  margin-bottom: 50px;
  .bgColor {
    width: 100%;
    height: 240rpx;
    background: #00c9ae;
  }

  .restaurantDetails-title {
    position: absolute;
    top: 10rpx;
    left: 6%;
    color: #ffffff;
    font-size: 34rpx;
    font-weight: bold;
  }

  .wrapper {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;

    .blueTitle {
      padding: 20rpx 40rpx;
      border-radius: 10rpx 10rpx 0 0;
      background: #e7fffc;
    }

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx 20rpx;
      background-color: #ffffff;
      box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
      border-radius: 10rpx;
      width: 702rpx;

      .wrapper-body {
        padding-top: 15px;
      }

      .item-info {
        display: flex;
        margin-bottom: 25rpx;

        .lt {
          display: flex;
          align-items: center;
          height: 34rpx;
          font-size: 26rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #7b7b7b;
        }

        .rt {
          width: calc(100% - 137rpx);
          font-size: 26rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          margin-left: 6rpx;
        }

        .stat1 {
          color: #ffc002;
        }

        .stat2 {
          color: #eb0101;
        }

        .stat3 {
          color: #0cad83;
        }
      }

      .wrapper-facility {
        .facility-item {
          .label {
            width: auto;
          }
        }
      }
    }

    .wrapper-bar {
      display: flex;
      justify-content: space-between;
      height: 40rpx;
      .wrapper-bartitle {
        font-size: 30rpx;
        font-weight: bold;

        .textState {
          margin-left: 8px;
          padding: 5rpx 12rpx;
          color: #ffffff;
          font-weight: 500;
          font-size: 24rpx;
          border-radius: 8rpx;
        }

        .stat1 {
          background: #ffc002;
        }

        .stat2 {
          background: #eb0101;
        }

        .stat3 {
          background: #0cad83;
        }
      }

      .book-bartitle {
        display: flex;

        .bar-image {
          margin-top: 5rpx;
          margin-right: 10rpx;
          width: 24rpx;
          height: 30rpx;
        }
      }
    }

    .wrapper-zero {
      border-radius: 0 0 10rpx 10rpx;
    }
  }
}
</style>
